<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <el-date-picker v-model="searchTerms.dateTime" value-format="yyyy-MM" class="select" type="month" placeholder="选择年份及月份" @change="getData"/>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row
                @sort-change="handleSortChange">
        <el-table-column prop="dateTime" label="日期" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="userName" label="姓名" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="totalSaleMoney" label="销售额" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="totalCommissionMoney" label="销售提成" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="totalBonusMoney" label="预期售后奖金" min-width="140" header-align="center" align="center"/>
        <el-table-column label="详细" min-width="140" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="success" class="bg-green" size="small" @click="toDetails(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange } from '../../../utils/table'

  export default {
    data() {
      return {
        searchTerms: {
          dateTime: ''
        },
        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 280,

        // 表格相关参数
        tableLoading: false,
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0,
        tableData: []
      }
    },
    mounted() {
      this.searchTerms.dateTime = this.$route.query.dateTime || '';
      this.getData();
    },
    created() {
    },

    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange,
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = 'achievement/getStatisticsInfo'
        const data = {
          page_no: this.currentPage,
          page_size: this.pageSize,
          dateTime: this.searchTerms.dateTime
        }
        order.sortName && (data.sortName = order.sortName)
        order.sortOrder && (data.sortOrder = order.sortOrder)
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      toDetails(row) {
        const query = { id: row.id, name: row.userName, dateTime: this.searchTerms.dateTime }
        this.$router.push({
          path: '/workbench/personalty',
          query: query
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    .header {
      padding-bottom: 15px;
      .select {
        width: 200px;
        margin-right: 10px;
      }
    }
  }

  .el-tag {
    cursor: pointer;
  }
</style>
